<script setup>
import { inject, onMounted, ref, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import Card from '@/views/new-screen/components/card.vue'
import { getHelper } from '@/utils/map/index.js'
import mitter from '@/utils/eventBus'

import noSel from '../../../../assets/imgs/list_d_cz.png'
import sel from '../../../../assets/imgs/list_company_sel.png'

import test1 from '../../../../assets/imgs/img1@2x.png'
import test2 from '../../../../assets/imgs/img2@2x.png'
import test3 from '../../../../assets/imgs/img3@2x.png'
import test4 from '../../../../assets/imgs/img4@2x.png'

import {
  buildingDetail,
  buildingPageList,
} from '@/api/manager/dataManage/building'

import { useDict } from '@/hooks/useDict'
import { tenantPageList } from '@/api/manager/dataManage/tenant.js'

const { getDictValue } = useDict()

let measure, _viewer, _layerManager

const mapId = inject('mapId')

const props = defineProps({
  isExpanded: Boolean,
  activePark: String,
})

let buildList = ref([
  {
    name: 'A号楼',
    address: '重庆市渝北区1号路',
    isDanger: false,
    level: '',
  },
  {
    name: '[蔡家园区]2号楼',
    address: '重庆市渝北区1号路',
    isDanger: false,
    level: '',
  },
  {
    name: '[蔡家园区]2号楼',
    address: '重庆市渝北区1号路',
    isDanger: true,
    level: '',
  },
  {
    name: '[蔡家园区]2号楼',
    address: '重庆市渝北区1号路',
    isDanger: true,
    level: '',
  },
  {
    name: 'A号楼',
    address: '重庆市渝北区1号路',
    isDanger: false,
    level: '',
  },
])

const levelColor = ref({
  C: '#EFD517',
  D: '#BBEF18',
})

let companyList = ref([
  {
    name: '重庆市北碚区朵金机械有限公司',
    isExpand: false,
    type: '企业',
    code: '91320102667375062C',
    operate: 'XXXXX',
    remarks: 'XXXXXXX',
  },
  {
    name: '重庆市北碚区恒飞仪表零件厂',
    isExpand: false,
    type: '企业',
    code: '91320102667375062C',
    operate: 'XXXXX',
    remarks: 'XXXXXXX',
  },
  {
    name: '重庆市北碚区朵金机械有限公司',
    isExpand: false,
    type: '企业',
    code: '91320102667375062C',
    operate: 'XXXXX',
    remarks: 'XXXXXXX',
  },
  {
    name: '重庆市北碚区恒飞仪表零件厂',
    isExpand: false,
    type: '企业',
    code: '91320102667375062C',
    operate: 'XXXXX',
    remarks: 'XXXXXXX',
  },
  {
    name: '重庆市北碚区朵金机械有限公司',
    isExpand: false,
    type: '企业',
    code: '91320102667375062C',
    operate: 'XXXXX',
    remarks: 'XXXXXXX',
  },
  {
    name: '重庆市北碚区恒飞仪表零件厂',
    isExpand: false,
    type: '企业',
    code: '91320102667375062C',
    operate: 'XXXXX',
    remarks: 'XXXXXXX',
  },
  {
    name: '重庆市北碚区朵金机械有限公司',
    isExpand: false,
    type: '企业',
    code: '91320102667375062C',
    operate: 'XXXXX',
    remarks: 'XXXXXXX',
  },
  {
    name: '重庆市北碚区恒飞仪表零件厂',
    isExpand: false,
    type: '企业',
    code: '91320102667375062C',
    operate: 'XXXXX',
    remarks: 'XXXXXXX',
  },
  {
    name: '重庆市北碚区朵金机械有限公司',
    isExpand: false,
    type: '企业',
    code: '91320102667375062C',
    operate: 'XXXXX',
    remarks: 'XXXXXXX',
  },
  {
    name: '重庆市北碚区恒飞仪表零件厂',
    isExpand: false,
    type: '企业',
    code: '91320102667375062C',
    operate: 'XXXXX',
    remarks: 'XXXXXXX',
  },
])

const getCompanyDataList = () => {
  tenantPageList({
    pageSize: 999,
    parkId: props.activePark,
  }).then((res) => {
    if (res.success) {
      companyList.value =
        res.data?.list?.map((item) => {
          return {
            name: item.name,
            type: item.type,
            code: item.code,
            operate: item.businessScope,
            remarks: item.remark,
            isExpand: false,
          }
        }) || []
    } else {
      ElMessage.error(res.message)
    }
  })
}

let buildCompanyList = ref([
  {
    name: '重庆市北碚区朵金机械有限公司',
    type: '企业',
    code: '91320102667375062C',
    operate: 'XXXXX',
    remarks: 'XXXXXXX',
  },
  {
    name: '重庆市北碚区朵金机械有限公司',
    type: '企业',
    code: '91320102667375062C',
    operate: 'XXXXX',
    remarks: 'XXXXXXX',
  },
  {
    name: '重庆市北碚区朵金机械有限公司',
    type: '企业',
    code: '91320102667375062C',
    operate: 'XXXXX',
    remarks: 'XXXXXXX',
  },
])

let showBuildDetail = ref(false)

let showFloorDetail = ref(false)

const showDetail = (item) => {
  showBuildDetail.value = true
  mitter.emit('showBuild', { show: showBuildDetail.value, floorCount: 10 })
  const params = {
    pkid: item.pkid,
  }
  buildingDetail(params).then((res) => {
    detailInfo.value = res.data
    if (res.data.imgList && res.data.imgList.length) {
      const images = res.data.imgList.map((item) => {
        return item.fileUrl
      })
      showImgList.value = [images]
    }
  })
}

const closeDetail = () => {
  showBuildDetail.value = false
  mitter.emit('showBuild', { show: showBuildDetail.value, floorCount: 10 })
}

mitter.on('showFloor', (val) => {
  showFloorDetail.value = val.show
  if (detailInfo.value && detailInfo.value.renterList) {
    buildCompanyList.value = detailInfo.value.renterList.filter(
      (i) => i.floor == val.floor,
    )
  }
})

let tableBaseInfo = ref([
  {
    title: '产权单位',
    value: 'propertyOwner',
  },
  {
    title: '不动产权证号',
    value: 'certificate',
  },
  {
    title: '房屋名称',
    value: 'name',
  },
  {
    title: '所在片区',
    value: 'regionRemark',
  },
  {
    title: '详细地址',
    value: 'address',
  },
  {
    title: '经纬度',
    value: 'geojson',
  },
  {
    title: '建成年份',
    value: 'year',
  },
  {
    title: '房屋类型',
    value: 'houseType',
    color: '#FF6059',
  },
  {
    title: '房屋结构',
    value: 'structure',
  },
  {
    title: '建筑高度(m)',
    value: 'height',
  },
  {
    title: '建筑总层数',
    value: 'floors',
  },
  {
    title: '地下层数',
    value: 'undergroundFloors',
  },
  {
    title: '证载用途',
    value: 'usage',
  },
  {
    title: '证载面积(㎡)',
    value: 'certificateArea',
  },
  {
    title: '实际面积(㎡)',
    value: 'actualArea',
  },
  {
    title: '使用情况',
    value: 'useStatus',
  },
  {
    title: '实物状况',
    value: 'houseStatus',
  },
  {
    title: '是否为危房',
    value: 'dangerHouse',
    color: '#68F2FE',
  },
  {
    title: '危房等级',
    value: 'dangerLevel',
    color: '#EFD517',
  },
  {
    title: '是否为重点区域',
    value: 'keyArea',
    color: '#68F2FE',
  },
  {
    title: '入驻企业数',
    value: 'renterList',
  },
  {
    title: '备注',
    value: 'remark',
  },
  {
    title: '房屋资料',
    value: 'files',
  },
])

let tableLandInfo = ref([
  {
    title: '产权人',
    value: 'propertyOwner',
  },
  {
    title: '土地产权编号',
    value: 'certificate',
  },
  {
    title: '土地面积(㎡)',
    value: 'area',
  },
  {
    title: '土地性质',
    value: 'character',
  },
  {
    title: '土地用途',
    value: 'usage',
  },
  {
    title: '宗地名称',
    value: 'name',
  },
  {
    title: '土地使用年限',
    value: 'useYear',
  },
  {
    title: '备注',
    value: 'XXXXXXXX',
  },
])

let imgList = ref([
  [test1, test2, test3, test4],
  [test3, test4, test1, test2],
  [test1, test4, test2, test3],
])

let showImgList = ref([])

let imgActive = ref(0)

const detailInfo = ref(null)

const leftClick = () => {
  if (imgActive.value > 0) {
    imgActive.value = imgActive.value - 1
    showImgList.value = [imgList.value[imgActive.value]]
  } else {
    ElMessage.warning('已经到头了')
  }
}
const rightClick = () => {
  if (imgActive.value < imgList.value.length - 1) {
    imgActive.value = imgActive.value + 1
    showImgList.value = [imgList.value[imgActive.value]]
  } else {
    ElMessage.warning('已经到头了')
  }
}

const getBuildingList = async () => {
  const res = await buildingPageList({
    pageIndex: 1,
    pageSize: 9999,
    parkId: props.activePark,
  })
  buildList.value = res.data.list
}

onMounted(async () => {
  const { map, layerManager } = await getHelper(mapId)
  _viewer = map
  measure = new Cesium.Measure(map)
  _layerManager = layerManager

  // showImgList.value = [imgList.value[imgActive.value]]
  getBuildingList()
  getCompanyDataList()
})
</script>
<template>
  <div :class="['right', isExpanded ? 'active' : '']">
    <div v-show="!showBuildDetail">
      <card name="园区房屋" class="house-area">
        <template #title>
          <i class="title-icon"></i>
        </template>
        <div class="build-list">
          <el-scrollbar>
            <div
              class="build-list-item"
              v-for="(item, index) in buildList"
              :key="index"
              @click="showDetail(item)"
            >
              <div class="build-list-item-left">
                <div class="build-list-item-left-name">{{ item.name }}</div>
                <div class="build-list-item-left-address">
                  <img src="../../../../assets/imgs/ic_dw.png" />
                  <span>{{ item.address }}</span>
                </div>
              </div>
              <div class="build-list-item-right">
                <div
                  class="build-list-item-right-level"
                  v-show="item.dangerHouse === '1'"
                  :style="{
                    color:
                      item.dangerHouse === '1'
                        ? levelColor[item.dangerLevel]
                        : '',
                  }"
                >
                  <span>{{ item.dangerLevel }}</span
                  >级
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </card>
      <card name="承租企业" class="company-info">
        <template #title>
          <i class="title-icon"></i>
        </template>
        <div class="company-list">
          <el-scrollbar>
            <div
              class="company-list-item"
              v-for="(item, index) in companyList"
              :key="index"
            >
              <div
                class="company-list-item-top"
                :style="{
                  backgroundImage: item.isExpand
                    ? `url(${sel})`
                    : `url(${noSel}`,
                }"
                @click="item.isExpand = !item.isExpand"
              >
                <span>{{ item.name }}</span>
                <img
                  src="../../../../assets/imgs/ic_gd.png"
                  v-if="!item.isExpand"
                />
                <img src="../../../../assets/imgs/ic_zk.png" v-else />
              </div>
              <div class="company-list-item-bottom" v-show="item.isExpand">
                <div class="company-list-item-bottom-line">
                  <span class="company-list-item-bottom-line-name"
                    >承租类型：</span
                  >
                  <span class="company-list-item-bottom-line-value">{{
                    item.type
                  }}</span>
                </div>
                <div class="company-list-item-bottom-line">
                  <span class="company-list-item-bottom-line-name"
                    >统一社会信用代码：</span
                  >
                  <span class="company-list-item-bottom-line-value">{{
                    item.code
                  }}</span>
                </div>
                <div class="company-list-item-bottom-line">
                  <span class="company-list-item-bottom-line-name"
                    >经营范围：</span
                  >
                  <span class="company-list-item-bottom-line-value">{{
                    item.operate
                  }}</span>
                </div>
                <div class="company-list-item-bottom-line">
                  <span class="company-list-item-bottom-line-name">备注：</span>
                  <span class="company-list-item-bottom-line-value">{{
                    item.remarks
                  }}</span>
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </card>
    </div>
    <div v-show="showBuildDetail">
      <card :name="detailInfo ? detailInfo.name : ''" class="build-detail">
        <template #title> </template>
        <template #right>
          <div class="right-close" @click="closeDetail">
            <img src="../../../../assets/imgs/ic_gb.png" />
          </div>
        </template>
        <div class="build-detail-title">
          <div class="build-detail-title-info">
            <div class="build-detail-title-info-left">
              <span>{{ detailInfo ? detailInfo.address : '' }}</span>
            </div>
            <div class="build-detail-title-info-right"></div>
          </div>
        </div>
        <div class="build-detail-content" v-if="!showFloorDetail">
          <el-scrollbar>
            <div class="area-title">
              <div class="area-title-left" style="justify-content: flex-start">
                <div class="area-title-left-names">
                  <div class="area-title-left-name">房屋基本信息</div>
                </div>
              </div>
            </div>
            <div class="table-info">
              <div
                class="line"
                v-for="(item, index) in tableBaseInfo"
                :key="index"
              >
                <div class="title">
                  <span>{{ item.title }}</span>
                </div>
                <div class="value" v-if="item.value === 'dangerHouse'">
                  <span>{{
                    detailInfo ? getDictValue('yn', detailInfo[item.value]) : ''
                  }}</span>
                </div>
                <div class="value" v-else-if="item.value === 'houseType'">
                  <span>{{
                    detailInfo
                      ? getDictValue('buildingType', detailInfo[item.value])
                      : ''
                  }}</span>
                </div>
                <div class="value" v-else-if="item.value === 'propertyOwner'">
                  <span>{{
                    detailInfo
                      ? getDictValue('propertyUnit', detailInfo[item.value])
                      : ''
                  }}</span>
                </div>
                <div class="value" v-else-if="item.value === 'structure'">
                  <span>{{
                    detailInfo
                      ? getDictValue(
                          'buildingStructure',
                          detailInfo[item.value],
                        )
                      : ''
                  }}</span>
                </div>
                <div class="value" v-else-if="item.value === 'useStatus'">
                  <span>{{
                    detailInfo
                      ? getDictValue('buildingUsage', detailInfo[item.value])
                      : ''
                  }}</span>
                </div>
                <div class="value" v-else-if="item.value === 'houseStatus'">
                  <span>{{
                    detailInfo
                      ? getDictValue('buildingStatus', detailInfo[item.value])
                      : ''
                  }}</span>
                </div>
                <div class="value" v-else-if="item.value === 'keyArea'">
                  <span>{{
                    detailInfo ? getDictValue('yn', detailInfo[item.value]) : ''
                  }}</span>
                </div>
                <div class="value" v-else-if="item.value === 'renterList'">
                  <span>{{
                    detailInfo ? detailInfo[item.value].length : ''
                  }}</span>
                </div>
                <div class="value" v-else>
                  <span :style="{ color: item.color ? item.color : '' }">{{
                    detailInfo ? detailInfo[item.value] : ''
                  }}</span>
                </div>
              </div>
            </div>
            <div class="img-title">房屋照片：</div>
            <div class="img-list">
              <img
                class="arrow"
                src="../../../../assets/imgs/ic_z.png"
                @click="leftClick"
              />
              <el-scrollbar ref="scrollbarRef">
                <div class="scrollbar-flex-content" ref="innerRef">
                  <div
                    v-for="(item, index) in showImgList"
                    :key="index"
                    class="scrollbar-demo-item"
                  >
                    <div class="img" v-for="i in item" :key="i">
                      <img class="img-img" :src="i" />
                      <!-- <span>{{ item.name }}</span> -->
                    </div>
                  </div>
                </div>
              </el-scrollbar>
              <img
                class="arrow"
                src="../../../../assets/imgs/ic_y.png"
                @click="rightClick"
              />
            </div>
            <div class="area-title">
              <div class="area-title-left" style="justify-content: flex-start">
                <div class="area-title-left-names">
                  <div class="area-title-left-name">房屋所在土地信息</div>
                </div>
              </div>
            </div>
            <div class="table-info">
              <div
                class="line"
                v-for="(item, index) in tableLandInfo"
                :key="index"
              >
                <div class="title">
                  <span>{{ item.title }}</span>
                </div>
                <div class="value" v-if="item.value === 'propertyOwner'">
                  <span>{{
                    detailInfo && detailInfo.mapRegion
                      ? getDictValue(
                          'propertyUnit',
                          detailInfo.mapRegion[item.value],
                        )
                      : ''
                  }}</span>
                </div>
                <div class="value" v-else-if="item.value === 'character'">
                  <span>{{
                    detailInfo && detailInfo.mapRegion
                      ? getDictValue(
                          'landNature',
                          detailInfo.mapRegion[item.value],
                        )
                      : ''
                  }}</span>
                </div>
                <div class="value" v-else-if="item.value === 'usage'">
                  <span>{{
                    detailInfo && detailInfo.mapRegion
                      ? getDictValue(
                          'landUse',
                          detailInfo.mapRegion[item.value],
                        )
                      : ''
                  }}</span>
                </div>
                <div class="value" v-else>
                  <span :style="{ color: item.color ? item.color : '' }">{{
                    detailInfo && detailInfo.mapRegion
                      ? detailInfo.mapRegion[item.value]
                      : ''
                  }}</span>
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>
        <div class="build-detail-content" v-else>
          <el-scrollbar>
            <div
              class="company"
              v-for="(item, index) in buildCompanyList"
              :key="index"
            >
              <div class="company-name">
                <img src="../../../../assets/imgs/ic_tb.png" />
                <span>{{ item.name }}</span>
              </div>
              <div class="company-line">
                <span class="company-line-name">承租类型：</span>
                <span class="company-line-value">{{
                  getDictValue('tenantType', item.type)
                }}</span>
              </div>
              <div class="company-line">
                <span class="company-line-name">统一社会信用代码：</span>
                <span class="company-line-value">{{ item.code }}</span>
              </div>
              <div class="company-line">
                <span class="company-line-name">经营范围：</span>
                <span class="company-line-value">{{ item.businessScope }}</span>
              </div>
              <div class="company-line">
                <span class="company-line-name">备注：</span>
                <span class="company-line-value">{{ item.remark }}</span>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </card>
    </div>
  </div>
</template>
<style scoped lang="scss">
.right {
  .title-icon {
    display: inline-flex;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 61px;
    position: relative;
    bottom: 20px;
    // margin-top: 10px;
  }

  .right-close {
    height: 100%;
    position: absolute;
    right: 0;

    img {
      height: 16px;
      width: 16px;
      cursor: pointer;
    }
  }

  .area-title {
    display: flex;
    height: 21px;
    position: relative;

    &-left {
      height: 100%;
      width: 345px;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-image: url('@/assets/imgs/tab_yq_d.png');
      margin-left: 10px;
      display: flex;
      justify-content: space-around;
      padding-left: 25px;

      &-names {
        width: 100px;
        display: flex;
        justify-content: flex-start;
      }

      &-name {
        font-family: Source Han Sans SC;
        font-weight: bold;
        font-size: 16px;
        color: #00a6ff;
        background: linear-gradient(0deg, #8dc4ff 0%, #ffffff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        cursor: pointer;
      }

      .is-active {
        font-weight: bold;
        font-size: 16px;
        color: #ffffff;
        background: linear-gradient(259deg, #fff4c8 0%, #ffc152 98.9990234375%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }

  .house-area {
    height: 448px;
    margin-bottom: var(--card-margin-bottom);

    .title-icon {
      width: 122px;
      background-image: url('@/assets/imgs/yqfw_title.png');
    }

    .build-list {
      height: 100%;
      overflow: hidden;

      &-item {
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url('@/assets/imgs/list_d.png');
        height: 80px;
        margin: 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: 17px;
        padding-right: 24px;
        cursor: pointer;

        &-left {
          &-name {
            font-family: Source Han Sans SC;
            font-weight: bold;
            font-size: 18px;
            color: #ffffff;
            margin-bottom: 6px;
          }

          &-address {
            font-family: Source Han Sans SC;
            font-weight: 400;
            font-size: 14px;
            color: #c4eaff;
            display: flex;
            height: 20px;
            align-items: center;

            img {
              height: 14px;
              width: 14px;
              margin-right: 6px;
            }
          }
        }

        &-right {
          font-family: Source Han Sans CN;
          font-weight: bold;

          &-info {
            font-size: 14px;

            span {
              font-size: 28px;
            }
          }
        }
      }
    }
  }

  .company-info {
    height: 506px;

    .title-icon {
      width: 182px;
      background-image: url('@/assets/imgs/czqy_title.png');
    }

    .company-list {
      height: 100%;
      overflow: hidden;

      &-item {
        margin: 4px;

        &-top {
          height: 40px;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          font-family: Source Han Sans SC;
          font-weight: 400;
          font-size: 14px;
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-left: 20px;
          padding-right: 20px;
          cursor: pointer;

          img {
            height: 14px;
            width: 14px;
          }
        }

        &-bottom {
          padding: 10px;
          background: rgba(11, 36, 70, 0.9);

          &-line {
            padding-left: 10px;
            padding-right: 10px;
            font-family: Source Han Sans SC;
            font-weight: 400;
            font-size: 14px;
            color: #ffffff;
            height: 24px;
            line-height: 24px;

            &-name {
              color: #c4eaff;
            }
          }
        }
      }
    }
  }

  .build-detail {
    height: 976px;

    &-title {
      height: 75px;
      margin-top: 10px;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-image: url('@/assets/imgs/build_detail_title.png');
      padding-left: 83px;
      padding-right: 21px;
      margin-bottom: 10px;

      &-info {
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-family: Source Han Sans SC;
        color: #ffffff;
        padding-left: 10px;

        &-left {
          font-size: 14px;
          font-weight: 400;
          line-height: 20px;
        }

        &-right {
          font-weight: 400;
          font-size: 14px;
        }
      }
    }

    &-content {
      height: calc(100% - 80px);
      overflow: hidden;

      .img-title {
        font-family: Source Han Sans SC;
        font-weight: 400;
        font-size: 12px;
        color: #c4eaff;
        line-height: 48px;
      }

      .img-list {
        margin-top: 18px;
        display: flex;
        align-items: center;
        margin-bottom: 10px;

        .arrow {
          height: 20px;
          width: 20px;
          margin: 10px;
          cursor: pointer;
        }

        .scrollbar-flex-content {
          display: flex;
          flex: 1;
        }

        .scrollbar-demo-item {
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-wrap: wrap;
          width: 100%;
          height: 210px;
          // margin: 5px;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          position: relative;

          .img {
            width: 49%;
            height: 47%;

            .img-img {
              height: 100%;
              width: 100%;
            }
          }
        }
      }

      .table-info {
        background: rgba($color: #0b2446, $alpha: 0.85);
        border: 1px solid rgba($color: #4d7db3, $alpha: 0.65);
        border-bottom: none;
        margin-top: 24px;

        .line {
          display: flex;
          // height: 32px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          font-size: 12px;
          color: #ffffff;
          border-bottom: 1px solid rgba($color: #4d7db3, $alpha: 0.65);

          div {
            display: flex;
            justify-content: center;
            align-items: center;
            padding-top: 10px;
            padding-bottom: 10px;
          }

          .title {
            width: 150px;
            border-right: 1px solid rgba($color: #4d7db3, $alpha: 0.65);
            color: #c4eaff;
          }

          .value {
            flex: 1;
          }
        }
      }

      .company {
        height: 200px;
        margin: 5px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-image: url('@/assets/imgs/card_d.png');
        position: relative;
        overflow: hidden;
        margin-top: 10px;

        &-name {
          height: 32px;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          background-image: url('@/assets/imgs/company_title_d.png');
          display: flex;
          align-items: center;
          margin-top: 9px;
          margin-left: 11px;
          padding-left: 10px;
          margin-bottom: 21px;

          img {
            height: 16px;
            width: 16px;
            margin-right: 8px;
          }

          span {
            font-family: Source Han Sans SC;
            font-weight: bold;
            font-size: 16px;
            color: #ffffff;
            background: linear-gradient(0deg, #8dc4ff 0%, #ffffff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }

        &-line {
          padding-left: 20px;
          padding-right: 10px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          font-size: 14px;
          color: #ffffff;
          height: 30px;
          line-height: 30px;

          &-name {
            color: #c4eaff;
          }
        }
      }
    }
  }
}
</style>
